<template>
	<div class="login-container">
		<div class="login-left"></div>
		<div class="login-r">
			<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
				<div class="title-container"><h3 class="title">用户登录</h3></div>
				<el-form-item prop="username">
					<span class="svg-container"><svg-icon icon-class="user" /></span>
					<el-input ref="username" v-model="loginForm.username" :placeholder="$t('login.username')" name="username" type="text" tabindex="1" autocomplete="on" />
				</el-form-item>

				<el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
					<el-form-item prop="password">
						<span class="svg-container"><svg-icon icon-class="password" /></span>
						<el-input
							:key="passwordType"
							ref="password"
							v-model="loginForm.password"
							:type="passwordType"
							:placeholder="$t('login.password')"
							name="password"
							tabindex="2"
							autocomplete="on"
							@keyup.native="checkCapslock"
							@blur="capsTooltip = false"
							@keyup.enter.native="handleLogin"
						/>
						<span class="show-pwd" @click="showPwd"><svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /></span>
					</el-form-item>
				</el-tooltip>

				<el-form-item prop="code">
					<div class="code-box">
						<span class="svg-container"><i class="el-icon-yanzhengmabeifen" /></span>
						<el-input ref="code" v-model="loginForm.code" placeholder="验证码" name="code" type="text" tabindex="3" autocomplete="on" />
						<a v-if="imgCode != ''" href="javascript:;" class="imgCode" @click="getLoginCode"><img :src="imgCode" /></a>
					</div>
				</el-form-item>
				<el-checkbox v-model="loginForm.remember" style="margin-bottom: 24px;margin-top: 10px;">七天免登陆</el-checkbox>
				<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;height: 48px;background: #C7333A;" @click.native.prevent="handleLogin">
					{{ $t('login.logIn') }}
				</el-button>
			</el-form>
			<!-- <div class="technical-support">Copyright © 2021 广东省技师学院</div> -->
		</div>
		<el-dialog :title="$t('login.thirdparty')" :visible.sync="showDialog">
			{{ $t('login.thirdpartyTips') }}
			<br />
			<br />
			<br />
			<social-sign />
		</el-dialog>
	</div>
</template>

<script>
import LangSelect from '@/components/LangSelect';
import SocialSign from './components/SocialSignin';
import { sbLogin } from '@/api/login.js';
import { mapMutations } from 'vuex';

export default {
	name: 'Login',
	components: { LangSelect, SocialSign },
	data() {
		const validateUsername = (rule, value, callback) => {
			if (!value) {
				callback(new Error('用户名不能为空!'));
			} else {
				callback();
			}
		};
		const validatePassword = (rule, value, callback) => {
			if (!value) {
				callback(new Error('密码不能为空!'));
			} else {
				callback();
			}
		};
		const validateCode = (rule, value, callback) => {
			if (!value) {
				callback(new Error('验证码不能为空!'));
			} else {
				callback();
			}
		};
		return {
			nav: 1,
			loginForm: {
				username: '',
				password: '',
				code: '',
				codeKey: '',
				remember: false
			},
			imgCode: '',
			loginRules: {
				username: [{ required: true, trigger: 'blur', validator: validateUsername }],
				password: [{ required: true, trigger: 'blur', validator: validatePassword }],
				code: [{ required: true, trigger: 'blur', validator: validateCode }]
			},
			passwordType: 'password',
			capsTooltip: false,
			loading: false,
			showDialog: false,
			redirect: undefined,
			otherQuery: {}
		};
	},
	watch: {
		$route: {
			handler: function(route) {
				const query = route.query;
				if (query) {
					this.redirect = query.redirect;
					this.otherQuery = this.getOtherQuery(query);
				}
			},
			immediate: true
		}
	},
	created() {
		// window.addEventListener('storage', this.afterQRScan)
		var that = this;
		var key = '';
		document.onkeydown = function(e) {
			if (window.event === undefined) {
				key = e.keyCode;
			} else {
				key = window.event.keyCode;
			}
			if (key === 13) {
				that.handleLogin();
			}
		};
	},
	mounted() {
		this.getLoginCode();
	},
	destroyed() {
		// window.removeEventListener('storage', this.afterQRScan)
	},
	methods: {
		...mapMutations(['SET_TOKEN']),
		// 获取社保扫码登录页面
		sbLogin() {
			sbLogin().then(res => {
				if (res.state) {
					window.location.href = res.data;
				} else {
					this.$message.error(res.msg);
				}
			});
		},
		checkCapslock(e) {
			const { key } = e;
			this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z');
		},
		showPwd() {
			if (this.passwordType === 'password') {
				this.passwordType = '';
			} else {
				this.passwordType = 'password';
			}
			this.$nextTick(() => {
				this.$refs.password.focus();
			});
		},
		handleLogin() {
			this.$refs.loginForm.validate(valid => {
				if (valid) {
					this.loading = true;
					this.$store
						.dispatch('user/login', this.loginForm)
						.then(res => {
							if (res.state) {
								document.onkeydown = undefined; // 避免登录成功后在其他页面按下enter再次触发登录
								this.$router.push({ path: this.redirect || '/', query: this.otherQuery });
							} else {
								this.$message.error(res.msg);
								this.getLoginCode();
							}
							this.loading = false;
						})
						.catch(() => {
							this.loading = false;
						});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		getLoginCode() {
			this.$store
				.dispatch('user/code')
				.then(res => {
					console.log(res);
					this.imgCode = res.imgUrl;
					this.loginForm.codeKey = res.captchaKey;
				})
				.catch(err => {
					this.$message.error(err);
				});
		},
		getOtherQuery(query) {
			return Object.keys(query).reduce((acc, cur) => {
				if (cur !== 'redirect') {
					acc[cur] = query[cur];
				}
				return acc;
			}, {});
		}
		// afterQRScan() {
		//   if (e.key === 'x-admin-oauth-code') {
		//     const code = getQueryObject(e.newValue)
		//     const codeMap = {
		//       wechat: 'code',
		//       tencent: 'code'
		//     }
		//     const type = codeMap[this.auth_type]
		//     const codeName = code[type]
		//     if (codeName) {
		//       this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
		//         this.$router.push({ path: this.redirect || '/' })
		//       })
		//     } else {
		//       alert('第三方登录失败')
		//     }
		//   }
		// }
	}
};
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg: #f3f3f7;
$light_gray: #000000;
$cursor: #000000;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
	.login-container .el-input input {
		color: $cursor;
	}
}

/* reset element-ui css */
.login-container {
	display: flex;
	.el-form-item--medium .el-form-item__content {
		background: #ffffff;
	}
	.el-input {
		display: inline-block;
		height: 47px;
		width: 85%;

		input {
			background: transparent;
			border: 0px;
			-webkit-appearance: none;
			border-radius: 0px;
			padding: 12px 5px 12px 15px;
			color: $light_gray;
			height: 47px;
			caret-color: $cursor;

			&:-webkit-autofill {
				box-shadow: 0 0 0px 1000px #ffffff inset !important;
				-webkit-text-fill-color: $cursor !important;
			}
		}
	}

	.el-form-item {
		border: 1px solid rgba(255, 255, 255, 0.1);
		background: rgba(0, 0, 0, 0.1);
		border-radius: 5px;
		color: #454545;
	}
}
</style>

<style lang="scss" scoped>
$bg: #f3f3f7;
$dark_gray: #999999;
$light_gray: #000;

.login-container {
	min-height: 100%;
	width: 100%;
	background-color: $bg;
	overflow: hidden;
	.login-ewm-div {
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 284px;
		height: 284px;
		background: #ffffff;
		margin-bottom: 64px;
		img {
			width: 250px;
			height: 250px;
		}
	}
	.login-nav {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 24px;
		.login-nav-col {
			cursor: pointer;
			margin: 0 20px;
			padding-bottom: 30px;
			height: 24px;
			font-size: 16px;
			font-weight: 400;
			color: #666666;
			line-height: 24px;
			border-bottom: 2px solid #f3f3f7;
		}
		.active {
			color: #c7333a;
			border-bottom: 2px solid #c7333a;
		}
	}
	.cbk-title {
		color: #fff;
		margin-top: 30px;
		font-size: 40px;
	}
	.login-left {
		width: 50%;
		background: url('../../assets/image/bg1.jpg') no-repeat center center;
		background-size: cover;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		img {
			width: 65%;
		}
	}
	.login-r {
		flex: 1;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.technical-support {
			font-size: 14px;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.45);
			line-height: 20px;
			display: flex;
			justify-content: center;
			position: absolute;
			bottom: 50px;
		}
	}
	.login-form {
		position: relative;
		width: 420px;
		max-width: 100%;
		margin: 0 auto;
		overflow: hidden;
		.el-button--primary {
			background-color: #c7333a;
			border-color: #c7333a;
		}
	}

	.tips {
		font-size: 14px;
		color: #fff;
		margin-bottom: 10px;

		span {
			&:first-of-type {
				margin-right: 16px;
			}
		}
	}

	.svg-container {
		padding: 6px 5px 6px 15px;
		color: #c7333a;
		vertical-align: middle;
		width: 30px;
		display: inline-block;
	}

	.title-container {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 54px;
		.title {
			font-size: 33px;
			font-weight: 500;
			color: rgba(0, 0, 0, 0.85);
			line-height: 33px;
		}
		.msg {
			margin-top: 16px;
			font-size: 22px;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.45);
			line-height: 22px;
		}

		.set-language {
			color: #fff;
			position: absolute;
			top: 3px;
			font-size: 18px;
			right: 0px;
			cursor: pointer;
		}
	}

	.show-pwd {
		position: absolute;
		right: 10px;
		top: 7px;
		font-size: 16px;
		color: $dark_gray;
		cursor: pointer;
		user-select: none;
	}

	.thirdparty-button {
		position: absolute;
		right: 0;
		bottom: 6px;
	}

	.code-box {
		display: flex;
		align-items: center;
		.imgCode {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
		img {
			height: 48px;
			width: 150px;
		}
	}

	@media only screen and (max-width: 470px) {
		.thirdparty-button {
			display: none;
		}
	}
}
</style>
